﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$1.collapse、$1.expand - ezj</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>

<div class="section">
  <h1>$1.collapse、$1.expand</h1>
  
  <div class="block">
    <h3>HTML 代码</h3>
    <textarea class="code xhtml">
    <div id="title1" class="title" style="cursor:default;">单击我</div>
    <div id="content1" class="content" style="background-color:red;color:#fff;">
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    </div>

    <div id="title2" class="title" style="cursor:default;">单击我</div>
    <div id="content2" class="content" style="background-color:green;color:#fff;">
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    </div>

    <div id="title3" class="title" style="cursor:default;">单击我</div>
    <div id="content3" class="content" style="background-color:blue;color:#fff;">
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    </div>
    </textarea>
    
    <h3>JavaScript 代码（ezj 代码）</h3>
    <textarea class="code javascript">
    ezj.ready(function(){
        var titles = $(".title");
        var contents = $(".content");
        titles.each(function(e, index){
            e.click(function(e){
                for (var i = 0; i < titles.length; i++)
                {
                    if (i != index)
                    {
                        contents[i].collapse(20, 10);
                    }
                    else
                    {
                        contents[i].expand(20, 10);
                    }
                }
            });
        });
        
        contents.each(function(e, index){
            if (index != 0)
            {
                e.collapse();
            }
        });
    });
    </textarea>
  </div>
  
  <div class="block">
    <h3>演示</h3>
    <div id="title1" class="title" style="cursor:default;">单击我</div>
    <div id="content1" class="content" style="background-color:red;color:#fff;">
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    </div>

    <div id="title2" class="title" style="cursor:default;">单击我</div>
    <div id="content2" class="content" style="background-color:green;color:#fff;">
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    </div>

    <div id="title3" class="title" style="cursor:default;">单击我</div>
    <div id="content3" class="content" style="background-color:blue;color:#fff;">
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    <div>www.getezj.com</div>
    </div>
  </div>
  
  <div class="block footer">
  版权所有 &copy; 2008 - 2010 <a href="http://www.getezj.com/" target="_blank">www.getezj.com</a>
  </div>
</div>

<script type="text/javascript" src="../ezj.js"></script>
<script type="text/javascript">
<!--
ezj.ready(function(){
    var titles = $(".title");
    var contents = $(".content");
    titles.each(function(e, index){
        e.click(function(e){
            for (var i = 0; i < titles.length; i++)
            {
                if (i != index)
                {
                    contents[i].collapse(20, 10);
                }
                else
                {
                    contents[i].expand(20, 10);
                }
            }
        });
    });
    
    contents.each(function(e, index){
        if (index != 0)
        {
            e.collapse();
        }
    });
    
    ezj.ext.codelighter(".code");
});
//-->
</script>

</body>

</html>